<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:composite="http://java.sun.com/jsf/composite"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">

<composite:interface>
</composite:interface>

<composite:implementation>
	<p:growl id="growl" />
	
	<h:form id="formEditPeriodoComposite" prependId="true">
		<p:tabView id="tvAbrirPeriodo">
			<p:tab id="tab1" title="Abrir Periodo">
				<p:wizard widgetVar="wizAbrirPeriodo" showStepStatus="false"
					showNavBar="false">
					<p:tab id="wiz1">
						<p:messages id="msgs" />
						<h:panelGrid columns="2" style="font-size:12px;">
							<h:outputText value="Periodo: " />
							<p:inputText id="txtPeriodo"
								value="#{abrirPeriodoController.periodoNuevo.nombre}"
								required="true" requiredMessage="Nombre del periodo requerido" />

							<h:outputText value="Fecha Inicio: " />
							<p:calendar navigator="true" id="calInicio"
								value="#{abrirPeriodoController.periodoNuevo.fechaInicio}"
								required="true"
								requiredMessage="Debe ingresar la fecha de inicio" />

							<h:outputText value="Fecha Fin: " />
							<p:calendar navigator="true" id="calFin"
								value="#{abrirPeriodoController.periodoNuevo.fechaFin}"
								required="true"
								requiredMessage="Debe ingresar la fecha de cierre" />
						</h:panelGrid>

						<p:commandButton value="Continuar" ajax="true"
							actionListener="#{abrirPeriodoController.validarPeriodoListener}"
							oncomplete="validarPeriodo(xhr, status, args)"
							update="tvAbrirPeriodo" icon="ui-icon-circle-arrow-e" process="@this,txtPeriodo,calInicio,calFin"/>
					</p:tab>

					<p:tab id="wiz2">
						<div style="clear: both;">
							<h:panelGrid columns="2" style="font-size:12px;">
								<p:commandButton value="Guardar" icon="ui-icon-disk" ajax="true"
									actionListener="#{abrirPeriodoController.guardarPeriodoListener}"
									oncomplete="guardoExito(xhr, status, args)"
									update="@this,msgsFinal" process="@this,pnlP" />
								<h:panelGroup />

								<h:outputText value="Periodo: " />
								<p:inputText
									value="#{abrirPeriodoController.periodoNuevo.nombre}"
									readonly="true" style="background-color: yellow;" />
							</h:panelGrid>
						</div>
						<div style="margin-top: 10px;">
							<p:panel id="pnlP">
								<h:outputText value="Agregar Maestrias:" />
								<p:pickList id="plMaestrias"
									value="#{abrirPeriodoController.maestrias}" var="maestria"
									effect="clip" itemValue="#{maestria}"
									itemLabel="#{maestria.nombre}" converter="maestriaConverter"
									showSourceControls="true" showTargetControls="true">

									<f:facet name="sourceCaption">Disponibles</f:facet>
									<f:facet name="targetCaption">Registrados</f:facet>

									<p:column>  
            							#{maestria.nombre}  
        							</p:column>
								</p:pickList>
							</p:panel>
						</div>
						<div>
							<p:commandButton value="Regresar"
								onclick="wizAbrirPeriodo.back();" actionListener="#"
								icon="ui-icon-circle-arrow-w" />
						</div>
					</p:tab>

					<p:tab id="wiz3">
						<p:messages id="msgsFinal" />
					</p:tab>
				</p:wizard>
			</p:tab>
		</p:tabView>
	</h:form>

	<script type="text/javascript">  
			
            function validarPeriodo(xhr, status, args) {
                if(!(args.validationFailed || !args.validoFecha)) {  
                	wizAbrirPeriodo.next();
                } 
            }

            function guardoExito(xhr, status, args) {
                if(!(args.validationFailed || !args.guardoExito)) {  
                    alert('Se guardo el periodo con éxito');
					var dlg = window.parent;
					wizAbrirPeriodo.back();
					dlg.cerrarDialogPeriodo();
            		//wizAbrirPeriodo.next();
                } 
            }
        </script>
</composite:implementation>
</html>